<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">

	<!-- Loding font -->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">

	<!-- Custom Styles -->
	<link rel="stylesheet" type="text/css" href="css/callerStyles.css">

	<title>Caller-Terminal</title>
</head>

<body>

	<!-- Backgrounds -->

	<div id="login-bg" class="container-fluid">

		<div class="bg-img"><img src="image/caller-bg.jpg"></div>
		<button id="service-stop" class="btn btn-danger" style="display: none">停止服务</button>
	</div>

	<!-- End Backgrounds -->

	<div id="verify" style="display: none">
			<input type="text" class="form-control" id="code" placeholder="请输入验证码"><button class="code">确认登录</button>
	</div>
	<div class="container" id="service">
		<div class="row justify-content-center">
			<div class="col-lg-8">
				<div class="service">
					<!-- Loging form -->
					<form class="login-form" >
						<h1>服务台 No.1</h1>
						<div class="form-group">
							<input type="text" class="form-control" id="id-number" placeholder="输入员工号">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" id="password" placeholder="输入密码">
						</div>
						<div class="form-group">
							<input type="windowsId" class="form-control" id="windowsId" placeholder="窗口号">
						</div>
						<div class="form-check">
							<label class="form-check-label" for="exampleCheck1">普通窗口</label>
							<label class="switch">
								<input type="checkbox">
								<span class="slider round"></span>
							</label>
							<label class="form-check-label" for="exampleCheck1">VIP窗口</label>

							<label id="card-login"><a href="javascript:void(0);">员工卡登录 &gt;&gt;</a></label>
						</div>

						<br>
						<button type="button" class="login btn btn-lg btn-block btn-primary">开始服务</button>
					</form>
					<!-- End Loging form -->

					<!-- Caller Terminal -->
					<div class="call-terminal"  style="display: none;">
						<h1>服务端 No.1</h1>
						<h4>目前业务：<b id="service-type">普通窗口</b></h4>
						<h4>当前号码：<b id="current-number"></b><span id="call-status">等待叫号</span></h4>
						<div class="buttons">
							<div>
								<button id="next-number" class="btn btn-primary">下个号码</button>
								<button id="repeat-call" disabled class="btn btn-warning">重复叫号</button>
							</div>
							<div>
								<button id="service-success" disabled class="btn btn-success">办理成功</button>
								<button id="service-fail" disabled class="btn btn-danger">办理失败</button>
							</div>
						</div>
					</div>
					<!-- End Caller Terminal -->

					<!-- Identity Check -->
					<div class="id-scan" style="display: none;">
						<div class="back">&lt;&lt;返回<br>
							(<span class="return-second">30</span>s)
						</div>
						<h1>请扫描员工卡</h1>
						<h4>身份验证中......</h4>
						<div class="scan-area">
							<img id="id-card" src="image/ID-Card.png">
						</div>
						<div class="check-pass">验证通过</div>
					</div>
					<!-- End Identity Check -->

				</div>
				<div class="system-time">
					当前系统时间：<span id="system-time"></span>
				</div>
			</div>
		</div>
	</div>
	<script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/callerMain.js"></script>
</body>

</html>